<template>
	<view class="content">
		<view class="user">
			<view v-if="isLogin" class="avatar">
				<image :src="userinfo.avatar"></image>
			</view>
			<view class="info">
				<view class="mobile">
					<text v-if="isLogin">{{userinfo.nickname}}</text>
          <text @click="goNext('/pages/login/login')" v-else>点击登录</text>
				</view>
				<view v-if="isLogin" class="more">
					<text @tap="goNext('/pages/my/set')">更多设置 ></text>
				</view>
			</view>
		</view>
		<!-- 常用服务 -->
		<view class="service">
			<view class="title">
				<text>常用服务</text>
			</view>
			<view class="main">
				<view class="item" @tap="goNext('/pages/order/order')">
					<image src="/static/my/order.png" mode="widthFix"></image>
					<view class="name">
						<text>我的订单</text>
					</view>
				</view>
				<view class="item">
					<image src="/static/my/wallet.png" mode="widthFix"></image>
					<view class="name">
						<text>我的钱包</text>
					</view>
				</view>
				<button class="item" open-type="contact">
					<image src="/static/my/kf.png" mode="widthFix"></image>
					<view class="name">
						<text>我的客服</text>
					</view>
				</button>
			</view>
		</view>
		<view class="hz1">
			<view class="item" @tap="joinDriver">
				<view class="info">
					<view class="title">
						<text>司机入驻</text>
					</view>
					<view class="desc">
						<text>跑车赚钱</text>
					</view>
				</view>
				<view class="img">
					<image src="/static/my/sjrz.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="item last-item">
				<view class="info">
					<view class="title">
						<text>顺风出行</text>
					</view>
					<view class="desc">
						<text>出行必备福利</text>
					</view>
				</view>
				<view class="img">
					<image src="/static/my/sfcx.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
    <view v-if="isDriver" @click="goNext('/pages/driver/driver')" class="driver">
      <image src="/static/sj.png"></image>
      <view>
        <text>我是辉鲨货滴司机</text>
        <text>点击进入司机专属界面</text>
      </view>
    </view>
		<!-- 图片导航 -->
		<view class="nav">
			<image src="/static/my/nav.png" mode="widthFix"></image>
      <view>
        <text>出行搬家都找</text>
        <text>辉鲨货滴</text>
      </view>
		</view>
		<!-- 便捷功能 -->
		<view class="bjgn">
			<view class="title">
				<text>便捷功能</text>
			</view>
			<view class="main">
				<view class="item">
					<image src="/static/my/cylx.png" mode="widthFix"></image>
					<view class="text1">
						<text>常用路线</text>
					</view>
				</view>
				<view class="item" @tap="goNext('/pages/my/addr')">
					<image src="/static/my/dzb.png" mode="widthFix"></image>
					<view class="text1">
						<text>地址簿</text>
					</view>
				</view>
				<button class="item" open-type="contact">
					<image src="/static/my/kfzx.png" mode="widthFix"></image>
					<view class="text1">
						<text>客服中心</text>
					</view>
				</button>
				<view class="item">
					<image src="/static/my/yjfk.png" mode="widthFix"></image>
					<view class="text1">
						<text>意见反馈</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 优惠活动 -->
		<view class="bjgn">
			<view class="title">
				<text>优惠活动</text>
			</view>
			<view class="main">
				<view class="item" v-for="item in yhhd" @tap="goNext(item.url)">
					<image :src="item.img" mode="widthFix"></image>
					<view class="text1">
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from "@/common/request";

  export default {
		data() {
			return {
        $uni:uni,
        isDriver:false,
        isLogin:false,
        userinfo:uni.getStorageSync('userinfo'),
				//优惠活动
				yhhd:[
					{img:'/static/my/thxc.png',name:'特惠洗车'},
					{img:'/static/my/yhjy.png',name:'优惠加油'},
					{img:'/static/my/sjjr.png',name:'司机加入',url:'/pages/my/sjrz'},
					{img:'/static/my/thcd.png',name:'特惠充电'},
					{img:'/static/my/yxcs.png',name:'严选车饰'},
					{img:'/static/my/zcmc.png',name:'租车买车'},
					{img:'/static/my/cpsc.png',name:'车品商城'},
					{img:'/static/my/bzfw.png',name:'保障服务'}
				],
			}
		},
    onShow() {
      this.isLogin = !!uni.getStorageSync('token');
      this.userinfo = uni.getStorageSync('userinfo') || {};
      if (this.isLogin){
        this.getAuthDriver();
      }
    },
		onLoad() {
			let token = uni.getStorageSync('token')
			let user = uni.getStorageSync('user')
			if(!token){
			/*	uni.navigateTo({
					url:"/pages/login/login"
				})*/
			}else{
				this.user = {
					avatar: user.avatar,
					mobile: user.mobile,
				}
			}
		},
		methods: {
      //司机入住
      joinDriver(){
        console.log(this.isDriver)
        if (!this.isDriver){
          this.goNext('/pages/my/sjrz')
        }else {
          uni.showToast({
            title:'您已经认证过了',
            icon:'none'
          })
        }
      },
      //获取是否认证司机
      getAuthDriver(){
        request({
          url:'/d/user/isDriver',
        }).then(res=>{
          this.isDriver = res.data.isDriver;
        })
      },
			//跳转
			goNext(url){
        if (url=='/pages/my/sjrz'){
          if (this.isDriver){
            uni.showToast({
              title:'您已经认证过了',
              icon:'none'
            })
            return false;
          }
        }
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding-bottom: 50rpx;
    .driver{
      width: 100%;
      height: 212rpx;
      position: relative;
      view{
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        top: 0;
        left: 0;
        z-index: 99;
        padding-top: 78rpx;
        padding-left: 53rpx;
        text:last-child{
          font-weight: 400;
          font-size: 24rpx;
          color: #FFFFFF;
          opacity: 0.5;
          margin-top: 13rpx;
        }
        text:first-child{
          font-weight: 500;
          font-size: 36rpx;
          color: #FFFFFF;
        }
      }
      image{
        width: 100%;
        height: 100%;
      }
    }
		.user{
			height: 110rpx;
			padding: 90rpx 20rpx 20rpx 20rpx;
			background-image: linear-gradient(to right, #E7F0FD,#F7E8F2);
			display: flex;
			.avatar{
				image{
					width: 110rpx;
					height: 110rpx;
					border-radius: 50%;
				}
			}
			.info{
				margin-left: 20rpx;
				padding-top: 20rpx;
				.mobile{
					line-height: 40rpx;
					font-size: $uni-font-size-lg;
					font-weight: bold;
				}
				.more{
					margin-top: 10rpx;
					line-height: 40rpx;
					color: #82818A;
					font-size: $uni-font-size-sm;
				}
			}
		}
		.service{
			background-color: #fff;
			margin:120rpx 20rpx 20rpx 20rpx;
			padding: 10rpx 20rpx 30rpx;
			border-radius: 30rpx;
			box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
			.title{
				line-height: 40rpx;
				padding: 30rpx;
				font-size: $uni-font-size-lg;
				font-weight: bold;
				border-bottom: 2rpx solid #F8F8F8;
			}
			.main{
				padding: 30rpx 30rpx 0;
				display: flex;
				.item{
					width: 33.33%;
					display: flex;
					flex-direction: column;
					align-items: center;
					background-color: #fff;
					image{
						width: 100rpx;
					}
					.name{
						margin-top: 20rpx;
						line-height: 40rpx;
						color: #606060;
						font-size: $uni-font-size-base;
					}
				}
				button::after{
					border: none;
				}
			}
		}
		.hz1{
			margin: 20rpx;
			padding: 20rpx 30rpx;
			background-color: #fff;
			border-radius: 30rpx;
			display: flex;
			justify-content: space-between;
			.item{
				display: flex;
				width: 49%;
				border-right: 1rpx solid #F7F7F7;
				.info{
					padding-top: 20rpx;
					.title{
						font-size: $uni-font-size-lg;
						font-weight: bold;
						line-height: 40rpx;
					}
					.desc{
						margin-top: 10rpx;
						line-height: 35rpx;
						color: #EB9169;
						font-size: $uni-font-size-sm;
					}
				}
				.img{
					margin-left: 30rpx;
					image{
						width: 120rpx;
					}
				}
			}
			.last-item{
				justify-content: flex-end;
				border-right: none;
			}
		}
		.nav{
			margin: 20rpx;
			border-radius: 30rpx;
      position: relative;
      view{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        top: 0;
        left: 0;
        padding: 43rpx 0 0 65rpx;
        position: absolute;
        text:last-child{
          font-weight: 400;
          font-size: 48rpx;
          color: #FF4200;
          margin-top: 8rpx;
        }
        text:first-child{
          font-weight: bold;
          font-size: 32rpx;
          color: #FF4200;
        }
      }
			image{
				width: 100%;
			}
		}
		.bjgn{
			margin: 20rpx;
			padding: 20rpx 30rpx 10rpx;
			background-color: #fff;
			border-radius: 30rpx;
			.title{
				font-size: $uni-font-size-lg;
				font-weight: bold;
				line-height: 40rpx;
			}
			.main{
				margin-top: 20rpx;
				display: flex;
				flex-wrap: wrap;
				.item{
					width: 25%;
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-bottom: 30rpx;
					background-color: #fff;
					image{
						width: 50rpx;
					}
					.text1{
						margin-top: 20rpx;
						line-height: 35rpx;
						font-size: $uni-font-size-sm;
						font-weight: bold;
						color: #424242;
					}
				}
				button::after{
					border: none;
				}
			}
		}
	}
</style>
<style>
	page{
		background-color: #F6F6F6;
	}
</style>
